<template>
  <div class="tab-pane-wrapper">
    <el-form class="form-search" :model="form" inline>
      <el-form-item label="时间">
        <el-date-picker
          style="width: 400px"
          v-model="form.dateRange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          type="daterange"
          value-format="yyyy-MM-dd"
          :unlink-panels="true"
          clearable
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="">
        <span class="fastTimeBtn" @click="fastTimeBtn(7)">近7天</span>
        <span class="fastTimeBtn" @click="fastTimeBtn(30)">近30天</span>
      </el-form-item>
      <el-form-item label="">
        <label class="btn-nav-bg stripe-btn" @click="getList">查 询</label>
        <label class="btn-nav-bg stripe-btn" @click="exportExcel">导 出</label>
      </el-form-item>
    </el-form>
    <div class="radio-box form-search">
      <el-radio-group v-model="paramName" @change="radioChange">
        <el-radio label="电压波动">电压波动分析(v)</el-radio>
        <el-radio label="电容容值">电容容值分析(mF)</el-radio>
        <el-radio label="开关频率">开关频率分析(Hz)</el-radio>
        <el-radio label="通信故障计数">通信故障计数分析(个/s)</el-radio>
      </el-radio-group>
    </div>
    <div class="chart-box">
      <linebar
        class="line-width"
        :grid="grid"
        :axisLabelColor="'rgba(198,211,236)'"
        :isLength="false"
        :datas="faultTime.data"
        :xAxis="faultTime.xAxis"
        :isShowTooltip="true"
      ></linebar>
    </div>
  </div>
</template>
<script>
import { getHistoryMeanValue } from "@/api/earlyWarning";
import Linebar from "@/components/Linebar";
export default {
  name: "history",
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  components: {
    Linebar,
  },
  data() {
    return {
      form: {
        dateRange: [],
      },
      paramName: "电容容值",
      grid: {
        containLabel: true,
        left: "4%",
        top: "10%",
        right: "4%",
        bottom: "10%",
      },
      faultTime: {
        data: [
          {
            type: "line",
            name: "历史数据",
            color: "#5087ec",
            showSymbol: true,
            smooth: true,
            data: [],
          },
          {
            type: "line",
            name: "桥臂平均值",
            color: "#35eb68",
            showSymbol: true,
            smooth: true,
            data: [],
          },
        ],
        xAxis: [],
      },
      moduleIdList: [],
    };
  },
  created() {
    this.form.dateRange = [
      this.$moment()
        .add(-1, "month")
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss"),
      this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    ];
    this.$bus.$on("sonModule", (arr) => {
      this.moduleIdList = JSON.parse(arr);
      this.getList();
    });
  },
  mounted() {},
  methods: {
    fastTimeBtn(dayNum) {
      this.form.dateRange = [
        this.$moment()
          .add(-dayNum, "day")
          .startOf("day")
          .format("YYYY-MM-DD HH:mm:ss"),
        this.$moment().endOf("day").format("YYYY-MM-DD HH:mm:ss"),
      ];
    },
    exportExcel() {},
    radioChange() {
      this.getList();
    },

    // endDate: this.$moment(this.form.dateRange[1]).endOf("day").format("YYYY-MM-DD HH:mm:ss"),
    // startDate: this.$moment(this.form.dateRange[0]).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
    async getList() {
      let params = {
        submoduleName: this.moduleIdList[0],
        pointName: this.paramName,
        endDate: this.$moment(this.form.dateRange[1]).format("YYYY-MM-DD"),
        startDate: this.$moment(this.form.dateRange[0]).format("YYYY-MM-DD"),
        stationName: this.$store.state.stationName,
        controlName: this.$store.state.controlName,
        bridgeName: this.$store.state.bridgeName,
      };
      let result = await getHistoryMeanValue(params);
      if (result.code == 20000) {
        this.faultTime.data[0].data = result.data.history.map((item) => {
          return item.value;
        });
        this.faultTime.data[1].data = result.data.history.map((item) => {
          return item.value;
        });
        this.faultTime.xAxis = result.data.history.map((item) => {
          return item.time;
        });
      }
    },
  },
};
</script>
<style scoped lang="less">
.tab-pane-wrapper {
  height: 100%;
  width: calc(100% - 380px);
  margin-left: 380px;
  padding: 20px;
  background-color: #202f3e;
  display: flex;
  flex-direction: column;
  .form-search {
    margin-bottom: 16px;
    .fastTimeBtn {
      color: #c6d3ec;
      font-size: 16px;
      font-weight: 500;
      margin-right: 16px;
      cursor: pointer;
    }
  }
  .radio-box {
    display: flex;
    justify-content: flex-end;
    .el-radio-group {
      width: auto;
      padding: 0 20px;
    }
  }
  .chart-box {
    width: 100%;
    flex: 1;
    .line-width {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
